let searchBtn = document.querySelector('#searchBox .searchBtn');
let searchCon = document.querySelector('#searchBox .searchBar input');
let historyUl = document.querySelector('#history');
let bin = document.querySelector('#title .bin');


bin.addEventListener('click', function(){
    if (confirm('您确定要清除搜索记录吗？')) {
        localStorage.removeItem('content');
        historyUl.innerHTML = "";
    }
});

// let conArr = localStorage.getItem('content');
// JSON.parse(conArr));

let data = localStorage.getItem('content');
// console.log(data);
if (data != null) {
    dataArr = JSON.parse(data);
    console.log(dataArr);
    for (let i = 0; i < dataArr.length; i++) {
        let p = `<li class="item">${dataArr[i]}<li>`;
        historyUl.innerHTML += p;
    }
}


searchBtn.addEventListener('click', function(){

    // 从input搜索框获取值
    let content = searchCon.value.trim();
    searchCon.value = "";

    // 判断输入的内容是否为空
    if (content == "") {
        alert('请输入要搜索内容！');
        return;
    }

    // 创建li节点标签
    let li = document.createElement('li');
    li.classList.add('item');
    li.innerHTML = content;

    // 将li添加到ul中
    historyUl.prepend(li);


    // 通过localStorage存储数据

    let arr = [];
    // -------获取之前的数据 开始-------
    let str = localStorage.getItem('content'); // 获取的是字符串类型的数据
    if (str != null) { // 判断从ls获取的数据是否存在
        arr = JSON.parse(str); // 将获取的数据转换成数组（因为我们在ls中存储的数据是以数组来存储的）
    }
    // -------获取之前的数据 结束-------

    // arr.splice(0, 0, content); // 将新数据追加到arr数组中
    arr.unshift(content);  // 作业与上一条语句一样

    // 存数据到localStorage
    localStorage.setItem('content', JSON.stringify(arr));

});

let back = document.querySelector('.back');
back.addEventListener('click', function(){
    // history.back();
    history.go(-1);
});